<template>
    <div class="content">
        <div class="title-item">
            <span>景区文博</span>
        </div>
        <div class="chart-div">
            <div id="whcg" class="chart-item-2"></div>
            <div id="jqgy" class="chart-item-2"></div>
<!--            <van-row>-->
<!--            <van-col span="12">-->
<!--               -->
<!--            </van-col>-->
<!--            <van-col span="12">-->
<!--              -->
<!--            </van-col>-->
<!--        </van-row>-->
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>酒店剧院</span>
        </div>
        <div class="chart-div">
            <div id="xjjd" class="chart-item-1"></div>
            <div id="jyyy" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>景区公园</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="2">
                    序号
                </van-col>
                <van-col span="7">
                    名称
                </van-col>
                <van-col span="5">
                    等级
                </van-col>
                <van-col span="5">
                    客流量
                </van-col>
                <van-col span="5">
                    客流指数
                </van-col>
            </van-row>
            <van-row class="table-item"  v-for="(item,index) in scenicArea " :key="index">
                <van-col span="2">
                    {{item.serial_num}}
                </van-col>
                <van-col span="7">
                    {{item.park_name}}
                </van-col>
                <van-col span="5">
                    3
                </van-col>
                <van-col span="5">
                    {{item.TODAY_NUM}}
                </van-col>
                <van-col span="5">
                    {{item.ratio}}
                </van-col>
            </van-row>
        </div>
        <div class="chart-div">
            <div id="jqgy_zx_1" class="chart-item"></div>
            <div id="jqgy_zx_2" class="chart-item"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>星级酒店</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="2">
                    序号
                </van-col>
                <van-col span="7">
                    名称
                </van-col>
                <van-col span="5">
                    等级
                </van-col>
                <van-col span="5">
                    客流量
                </van-col>
                <van-col span="5">
                    客流指数
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="item in hotelData" :key="item.SERIAL_NUM">
                <van-col span="2">
                    {{item.SERIAL_NUM}}
                </van-col>
                <van-col span="7">
                    {{item.name}}
                </van-col>
                <van-col span="5">
                    {{item.star_level}}
                </van-col>
                <van-col span="5">
                   {{item.check_num}}
                </van-col>
                <van-col span="5">
                    {{item.ratio}}
                </van-col>
            </van-row>
        </div>
        <div class="chart-div">
            <div id="xjjd_1" class="chart-item-3"></div>
            <div id="xjjd_2" class="chart-item-3"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>文博院馆</span>
        </div>
        <div class="chart-div">
            <div id="wbyg_1" class="chart-item-3"></div>
            <div id="wbyg_2" class="chart-item-3"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>文化场所</span>
        </div>
        <div class="chart-div">
            <div id="whcs_1" class="chart-item"></div>
            <div id="whcs_2" class="chart-item"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>剧院演艺</span>
        </div>
        <div class="chart-div">
            <div id="jyyy_1" class="chart-item"></div>
            <div id="jyyy_2" class="chart-item-3"></div>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import * as publicPlace from '@/api/public-place/index'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      // 景区明细
      scenicArea: [],
      // 酒店明细
      hotelData: []
    }
  },
  methods: {
    // 文化场馆 legendData =>图例 seriesData => 数据
    whcg (data) {
      let legendData = []; let seriesData = []
      data.forEach(item => {
        legendData.push(item.object)
        seriesData.push({ value: item.amount, name: item.object })
      })
      let myChart = echarts.init(document.getElementById('whcg'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '文化场馆',
          left: 'left',
          textStyle: {
            fontSize: '12px'
          },
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        legend: {
          // orient: 'vertical',
          bottom: 10,
          left: '20%',
          right: '20%',
          data: legendData
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 景区公园 legendData =>图例 seriesData => 数据
    jqgy (data) {
      let legendData = []; let seriesData = []
      data.forEach(item => {
        legendData.push(item.object)
        seriesData.push({ value: item.amount, name: item.object })
      })
      let myChart = echarts.init(document.getElementById('jqgy'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '景区公园',
          left: 'left',
          textStyle: {
            fontSize: '12px'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          left: '20%',
          bottom: 10,
          data: legendData
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 酒店 legendData =>图例 seriesData => 数据
    xjjd (data) {
      let legendData = []; let seriesData = []
      data.forEach(item => {
        legendData.push(item.object)
        seriesData.push({ value: item.amount, name: item.object })
      })
      let myChart = echarts.init(document.getElementById('xjjd'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '星级酒店',
          left: 'left',
          textStyle: {
            fontSize: '12px'
          },
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          bottom: 20,
          left: 'center',
          data: legendData
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '35%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 剧院表演 legendData =>图例 seriesData => 数据
    jyyy (data) {
      let legendData = []; let seriesData = []
      data.forEach(item => {
        legendData.push(item.object)
        seriesData.push({ value: item.amount, name: item.object })
      })
      let myChart = echarts.init(document.getElementById('jyyy'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '剧院演艺',
          left: 'left',
          textStyle: {
            fontSize: '12px'
          },
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        legend: {
          // orient: 'vertical',
          bottom: 10,
          left: 'center',
          data: legendData
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '30%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 景区客流量 时间=>xData 客流总量=>allData
    jqgy_zx_1 (data) {
      let xData = []; let allData = []
      data.forEach(item => {
        xData.push(item.md)
        allData.push(item.all_num)
      })
      let myChart = echarts.init(document.getElementById('jqgy_zx_1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流量']
        },
        grid: {
          left: '15%',
          right: '20',
          top: '5%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流量',
            type: 'line',
            stack: '总量',
            data: allData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 景区客流量指数  时间=>xData 客流指数=>allRatioData
    jqgy_zx_2 (data) {
      let xData = []; let allRatioData = []
      data.forEach(item => {
        xData.push(item.md)
        allRatioData.push(item.all_ratio)
      })
      let myChart = echarts.init(document.getElementById('jqgy_zx_2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流指数']
        },
        grid: {
          left: '10%',
          right: '7%',
          top: '4%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流指数',
            type: 'line',
            stack: '客流指数',
            data: allRatioData,
            color: '#37a2da'
          }

        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 酒店 折线图 时间=> xData  五星/四星/三星 =>  fiveData  fourData threeData
    xjjd_1 (data) {
      let xData = []; let fiveData = []; let fourData = []; let threeData = []
      data.forEach(item => {
        xData.push(item.md)
        fiveData.push(item.five_num)
        fourData.push(item.four_num)
        threeData.push(item.three_num)
      })
      let myChart = echarts.init(document.getElementById('xjjd_1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['五星级', '四星级', '三星级']
        },
        grid: {
          left: '10%',
          right: '6%',
          top: '4%'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '五星级',
            type: 'line',
            areaStyle: {},
            data: fiveData
          },
          {
            name: '四星级',
            type: 'line',
            areaStyle: {},
            data: fourData
          },
          {
            name: '三星级',
            type: 'line',
            areaStyle: {},
            data: threeData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 酒店折线图 时间=> xData 总量 => allData 客流指数 =>  ratioData
    xjjd_2 (data) {
      let xData = []; let allData = []; let ratioData = []
      data.forEach(item => {
        xData.push(item.md)
        allData.push(item.all_num)
        ratioData.push(item.ratio)
      })
      let myChart = echarts.init(document.getElementById('xjjd_2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流量', '客流指数']
        },
        grid: {
          left: '15%',
          right: '8%',
          top: '5%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流量',
            type: 'line',
            stack: '总量',
            data: allData
          },
          {
            name: '客流指数',
            type: 'line',
            stack: '客流指数',
            data: ratioData
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    wbyg_1 () {
      let myChart = echarts.init(document.getElementById('wbyg_1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['博物馆', '纪念馆', '收藏馆', '历史馆']
        },
        grid: {
          left: '10%',
          right: '8%',
          top: '4%'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [
          {
            name: '博物馆',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight'
            },
            data: [320, 302, 301, 334, 390, 330, 320],
            color: '#37a2da'
          },
          {
            name: '纪念馆',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight'
            },
            data: [120, 132, 101, 134, 90, 230, 210],
            color: '#32c5e9'
          },
          {
            name: '收藏馆',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight'
            },
            data: [220, 182, 191, 234, 290, 330, 310],
            color: '#67e0e3'
          },
          {
            name: '历史馆',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'insideRight'
            },
            data: [150, 212, 201, 154, 190, 330, 410],
            color: '#9fe6b8'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    wbyg_2 () {
      let myChart = echarts.init(document.getElementById('wbyg_2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流量']
        },
        grid: {
          left: '17%',
          right: '6%',
          top: '6%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['02-19', '02-20', '02-21', '02-22', '02-23', '02-24', '02-25']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流量',
            type: 'line',
            stack: '总量',
            data: [33000, 34000, 35000, 36000, 37000, 380000, 410000]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    whcs_1 () {
      let myChart = echarts.init(document.getElementById('whcs_1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}  <br/> {c} ({d}%)'
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: [30, 90],
            center: ['50%', '45%'],
            roseType: 'area',
            label: {
              show: true
            },
            labelLine: {
              length: '8',
              legend2: '7'
            },
            data: [
              { value: 10, name: '沈阳市图书馆' },
              { value: 5, name: '沈阳市朝鲜族文化艺术馆' },
              { value: 15, name: '沈阳市群众艺术馆' },
              { value: 25, name: '沈阳美术馆' },
              { value: 20, name: '沈阳市少年儿童图书馆' },
              { value: 35, name: '沈阳市青少年宫' },
              { value: 30, name: '沈阳科学宫' },
              { value: 40, name: '沈阳儿童活动中心' },
              { value: 20, name: '沈阳市妇女会馆' }
            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    whcs_2 () {
      let myChart = echarts.init(document.getElementById('whcs_2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '15%',
          right: '6%',
          top: '2%',
          bottom: '15%'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流量']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['02-19', '02-20', '02-21', '02-22', '02-23', '02-24', '02-25']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流量',
            type: 'line',
            stack: '总量',
            data: [33000, 34000, 35000, 36000, 37000, 380000, 410000]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    jyyy_1 () {
      let myChart = echarts.init(document.getElementById('jyyy_1'))
      // 指定图表的配置项和数据
      let option = {
        legend: {
          bottom: 8,
          left: 'center',
          data: ['客流量', '客流指数']
        },
        grid: {
          left: '10%',
          right: '6%',
          top: '5%'
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '客流量', '客流指数'],
            ['盛京大剧院', 43.3, 85.8],
            ['南风剧场', 83.1, 73.4],
            ['北陵军人俱乐部', 86.4, 82.5],
            ['刘老根大舞台', 72.4, 39.1],
            ['辽宁歌剧院', 72.4, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar', color: '#37a2da' },
          { type: 'bar', color: '#32c5e9' }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    jyyy_2 () {
      let myChart = echarts.init(document.getElementById('jyyy_2'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '16%',
          right: '6%',
          top: '6%',
          bottom: '15%'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['客流量']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['02-19', '02-20', '02-21', '02-22', '02-23', '02-24', '02-25']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客流量',
            type: 'line',
            stack: '总量',
            data: [33000, 34000, 35000, 36000, 37000, 380000, 410000]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    getData () {
      //   文化场馆饼图
      publicPlace.thessbwhList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '文化场馆（饼图）')
          this.whcg(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 景区饼图
      publicPlace.threebajqList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '景区公园（饼图）')
          this.jqgy(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 酒店饼图
      publicPlace.threebjdList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '酒店（饼图）')
          this.xjjd(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 娱乐饼图
      publicPlace.threebylList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '娱乐（饼图）')
          this.jyyy(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 景区明细
      publicPlace.threequmxList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '景区明细')
          this.scenicArea = res
          this.jqgy_zx_1(res)
          this.jqgy_zx_2(res)
          // 客流量客流指数
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 酒店明细 （api error）
      publicPlace.jdmxList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          console.log(res, '酒店明细')
          // this.scenicArea = res
          this.hotelData = res
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 酒店明细下折线图
      publicPlace.zxjjdList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          // console.log(res, '酒店明细')
          this.xjjd_1(res)
          this.xjjd_2(res)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getData()
    this.wbyg_1()
    this.wbyg_2()
    this.whcs_1()
    this.whcs_2()
    this.jyyy_1()
    this.jyyy_2()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .chart-item{
        width: 100%;
        height:300px;
    }
    .chart-item-1{
        width: 100%;
        height: 190px;
    }
    .chart-item-3{
        width: 100%;
        height: 350px;
    }
    .chart-item-2{
        width: 100%;
        height: 210px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-3,.chart-div .chart-item-2,.chart-div .chart-item-1,.chart-div .chart-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .mb10{
        margin-bottom: 10px;
    }
    .chart-div .van-col.van-col--12{
        padding: 0;
    }
</style>
